<template>
    <div v-loading="loadingData" class="userTable" v-if="addUserBox">
        <div class="seach-add-box">
            <el-row>
                <el-col :span="8" :offset="1">
                    <el-input v-model.trim = "searchCondition" size="medium"
                        placeholder="请输入搜索内容" auto-complete="off" clearable>
                    </el-input>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" size="medium" @click="onQuery">查询</el-button>
                </el-col>
                <el-col :span="4" :offset="4">
                    <el-button class="fr" type="primary" size="medium" @click="addUserBox = false,dataType = 1">新增banner</el-button>
                </el-col>
            </el-row>
        </div>
        <el-table :data="tableData" border  style="width: 100%" 
            :header-cell-class-name="headerCellClassName"
            :row-class-name="tableRowClassName">
            <el-table-column prop="code"  label="编码"  width="200"></el-table-column>
            <el-table-column prop="title"   label="标题"  width="150"></el-table-column>
            <el-table-column label="图片" width="150">
                <template slot-scope="scope">
                    <div class="imgPath-box margin-auto">
                        <img :src="$imgPath(scope.row.image)" alt="" width="100" height="50">
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="url"  label="链接" width="150"></el-table-column>
            <el-table-column prop="seqNum"  label="排序" width="200"></el-table-column>
            <el-table-column label="状态" width="150">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.isStatus" @change="isSwitch(scope.row.isStatus)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="descript" label="发布用户" width="150"></el-table-column>
            <el-table-column prop="createTime" label="发布日期" width="150">
                <template slot-scope="scope">
                    <span>{{scope.row.createTime | createTimeFile}}</span>
                </template>
            </el-table-column>
            <el-table-column  fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="addUserBox = false,dataType = 2,editBanner(scope.row)">修改</el-button>
                    <el-button type="text" size="small" @click="editBanner(scope.row),delectBanner()">删除</el-button>
                </template>
            </el-table-column> 
        </el-table>
        <!--分页开始-->
        <div class="block">
        <span class="pageFreshFoot"><el-button type="text" class="xin" @click="xin()">刷新</el-button></span>
        <div class="pageComponentFoot">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="cpage"
                :page-sizes="[10,20,30,40]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount">
            </el-pagination>
        </div>
        <div style="clear:both"></div>
        </div>
        <!--分页结束-->
    </div>
    <div v-else>
         <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark clearfix">
                    <ul class="dataUpdateUl fl">
                        <li class="clearfix">
                            <label class="fl labelWidth text-align-r">
                                编码
                            </label>
                            <input class="inputtext margin0" v-model="addBanner.code" style="width:350px;" type="text" name="" id="">
                        </li>
                        <li class="clearfix">
                            <label class="fl labelWidth text-align-r">
                                状态
                            </label>
                            <div class="fl">
                                <el-radio  v-model="addBanner.status" label="0">开启</el-radio>
                                <el-radio  v-model="addBanner.status" label="1">关闭</el-radio>
                            </div>
                        </li>
                        <li class="clearfix">
                            <label class="fl labelWidth text-align-r">
                                标题
                            </label>
                            <input class="inputtext margin0" v-model="addBanner.title" style="width:350px;" type="text" name="" id="">
                        </li>
                        <li class="clearfix">
                            <label class="fl labelWidth text-align-r">
                                链接
                            </label>
                            <input class="inputtext margin0" v-model="addBanner.url" style="width:350px;" type="text" name="" id="">
                        </li>
                        <li class="clearfix">
                            <label class="fl labelWidth text-align-r">
                                排序
                            </label>
                            <input class="inputtext margin0" v-model="addBanner.seqNum" style="width:350px;" type="text" name="" id="">
                        </li>
                        
                    </ul>
                    <div class="service-box fl">
                        <div class="clearfix" style="margin-bottom:10px;">
                            <span class="service-logo fl labelWidth text-align-r">图片地址</span>
                            <el-upload
                                class="avatar-uploader fl"
                                action="http://132.232.13.213:8081/file/upload"
                                :data="uploadData"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                                <img v-if="addBanner.image" :src="addBanner.image" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                            <span class="service-beizhu fl">注：建议使用750*360px，文件大小不超过3M，文件格式jpg,jpeg,png,gif</span>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div class="text-align-c button-box">
            <el-button type="info" @click="addUserBox = true,addBanner.code = '',addBanner.title = '',addBanner.url = '',addBanner.seqNum = '',addBanner.status = '',addBanner.image = ''">取消</el-button>
            <el-button type="primary" @click="addBannerDate()">保存</el-button>
        </div>
    </div>
</template>

<script>
    import '@/mock/user.js';
    import HttpService from '../../api/service'
    export default {
        data() {
            return {  
                tableData: [],  
                addUserBox:true,  
                uploadData:{            //  上传图片需要的参数，记得修改
                    objectId:'111',
                    model:'aaaaa'
                },   
                addBanner:{
                    code:'',            // 图片路径     
                    status:'',
                    title:'',
                    title:'',
                    seqNum:'',
                    image:''
                },
                updateId:'',
                dataType:1,
                multipleSelection: [],       
                select_word: '',
                loadingData: false,
                pageNumber: 1,
                searchCondition: '',
                totalPage:'',           //  总页数
                cpage:1,                //  当前页
                pagesize:10,            //  每页显示数
                totalCount:0,         //  总条数
            }
        },
        created(){         
        },
        mounted() {  
            this.bannerLists()
        },
        methods: {
            // 设置header颜色
            headerCellClassName({row, rowIndex}){
                return 'header-row';
            },
            // 设置内容行的颜色
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                    return 'even-row';
                }   
                return '';
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            handleClick(row) {
                console.log(row);
            },
            // banner列表
            bannerLists(){
                let parmes = {
                    sort:'',
                    page:this.cpage - 1,
                    size:this.pagesize
                }
                HttpService.service.bannerList(parmes,resp =>{
                    for(let i = 0; i < resp.content.length; i++){
                        if(resp.content[i].status == 0) {
                            resp.content[i].isStatus = true
                        }else{
                            resp.content[i].isStatus = false
                        }
                    }
                    this.tableData = resp.content
                    this.totalPage = resp.totalPages
                    this.totalCount = resp.totalElements
                })
            },
            // 删除banner
            delectBanner(){
                this.$confirm('您确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        let parmes = {
                            id: this.updateId
                        }
                        HttpService.service.deleteBanner(this.updateId,parmes,resp=>{
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.bannerLists()
                        }) 
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
            // 查询
            onQuery(){

            },
            handleSizeChange(val) {
                this.cpage = val
                this.bannerLists()
            },
            handleCurrentChange(val) {
                this.cpage = val
                this.bannerLists()
            },
            // switch 方法
            isSwitch(type,item){
                this.$message('功能正在开发中... 请期待')
            },
            // 新增banner
            addBannerDate(){ 
                if(this.dataType == 1) {
                    let parmes = this.$qs.parse(this.addBanner)
                    HttpService.service.addBanner(parmes,resp => {
                        console.log(resp)
                    })
                }else{
                    let parmes = this.addBanner
                    HttpService.service.updateBanner(this.updateId,parmes,resp=>{
                        console.log(resp)
                    })
                }
                
            },
            // 修改banner
            editBanner(item){
                this.updateId = item.id
                this.addBanner.code = item.code
                this.addBanner.status = item.status.toString()
                this.addBanner.title = item.title
                this.addBanner.url = item.url
                this.addBanner.seqNum = item.seqNum
                this.addBanner.image = item.image
            },
            //  上传图片触动的方法start
            handleAvatarSuccess(res, file) {
                this.addBanner.image = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
            //  end
        },
        filters:{
            createTimeFile(val){
                let d = new Date(val)
                return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}` 
            }
        }
    }
</script>

<style>
    .el-table .even-row {
        background:#F2F3F7;
    }
    .el-table .header-row{
        background: #D5E7F3;    
    }
    .userTable .cell {    
        text-align: center;
    }
    .userTable .el-table--border td {
        border-right: none
    }
    .handle-box{
        margin-bottom: 20px;
    }
    .handle-select{
        width: 120px;
    }
    .handle-input{
        width: 300px;
        display: inline-block;
    }
</style>